<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="用户名称"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input
                  style="width: 120px"
                  disabled
                  placeholder="请输入"
                  :value="user.userName"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="手机号"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input
                  style="width: 120px"
                  disabled
                  placeholder="请输入"
                  :value="user.userPhone"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="性别"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select
                  placeholder="请选择"
                  style="width: 120px"
                  v-model="user.sex"
                  :options="sexOptions"
                  disabled
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="邮箱号"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input
                  style="width: 120px"
                  disabled
                  placeholder="请输入"
                  :value="user.email"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="用户状态"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select
                  placeholder="请选择"
                  style="width: 120px"
                  v-model="user.userStatus"
                  disabled
                >
                  <a-select-option :value="1"> 启用 </a-select-option>
                  <a-select-option :value="2"> 禁用 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="角色"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                disabled
              >
                <a-select
                  ref="select"
                  placeholder="请选择"
                  style="width: 120px"
                  v-model="user.roleId"
                  disabled
                >
                  <a-select-option value="1234"> 普通用户 </a-select-option>
                  <a-select-option value="123"> 系统管理员 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <a-button type="primary" @click="resetPwd">重置密码</a-button>
    <div v-show="isReset">
      <a-form-model
        :model="form"
        :rules="rules"
        ref="form"
        layout="horizontal"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-form-model-item prop="password" label="旧密码">
          <a-input
            v-model="form.password"
            placeholder="请输入旧密码"
            type="password"
            onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item prop="newPassword" label="新密码">
          <a-input
            v-model="form.newPassword"
            placeholder="请输入新密码"
            type="password"
            onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item prop="newPassword2" label="确认新密码">
          <a-input
            v-model="form.newPassword2"
            placeholder="请再次输入新密码"
            type="password"
            onkeyup="this.value=this.value.replace(/(^\s*)|(\s*$)/g,'')"
          ></a-input>
        </a-form-model-item>
        <div class="modal-button">
          <a-button style="margin-right: 8px" @click="resetCancel"
            >取消</a-button
          >
          <a-button type="primary" class="submit" @click="submitEdit('form')"
            >确定</a-button
          >
        </div>
      </a-form-model>
    </div>
  </a-card>
</template>

<script>
import { mapState } from "vuex";
import { resetPassword, logout, getKey } from "@/services/user";
import { encrypt } from "@/utils/Objects";

export default {
  name: "PersonList",
  computed: {
    ...mapState("account", ["user"]),
  },
  data() {
    // 表单验证
    let validateNewPassword = (rule, value, callback) => {
      if (value === this.form.password) {
        callback(new Error("新密码不能与旧密码相同"));
      } else {
        callback();
      }
    };
    let validateNewPassword2 = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error("与新密码不一致"));
      } else {
        callback();
      }
    };

    return {
      sexOptions: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
      visible: false,
      form: {
        password: "",
        newPassword: "",
        newPassword2: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "change" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "change" },
          { validator: validateNewPassword, trigger: "change" },
        ],
        newPassword2: [
          { required: true, message: "请重新输入新密码", trigger: "change" },
          { validator: validateNewPassword2, trigger: "change" },
        ],
      },
      isReset: false,
      loading: false,
    };
  },
  created() {
    this.isReset = this.$route.query.isReset;
  },
  methods: {
    resetPwd() {
      this.isReset = true;
    },
    resetCancel() {
      this.isReset = false;
      this.form.password = "";
      this.form.newPassword = "";
      this.form.newPassword2 = "";
    },
    // 修改密码
    submitEdit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let { newPassword, password, newPassword2 } = this.form;
          let params = {
            newPassword: newPassword,
            oldPassword: password,
            oncePassword: newPassword2,
          };
          getKey(this.user.userPhone).then((data) => {
            params.newPassword = encrypt(newPassword, data);
            params.oldPassword = encrypt(password, data);
            params.oncePassword = encrypt(newPassword2, data);
            resetPassword(params).then((res) => {
              console.log("resetPassword-res: ", res);
              if (!res) return;
              if (res.retcode !== "success") {
                this.$message.warn(res.retmsg);
              } else {
                this.$message.success("修改成功");
                logout();
                this.$router.push("/login");
              }
            });
          });
        } else {
          return false;
        }
      });
    },
    modalClose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.modal-button {
  float: right;
  margin-right: 20px;
}
</style>